import React from "react";
import {
  Text,
  HoverCard,
  ActionIcon,
  HoverCardDropdown,
  HoverCardTarget,
  Badge,
  Stack,
} from "@mantine/core";
import {IconCircleFilled} from "@tabler/icons-react";

export const IpdPort = () => {
  return (
    <HoverCard width={280} shadow="md">
      <HoverCardTarget>
        {/* <ActionIcon variant="light" color="green">
          <IconCircleFilled size={20} />
        </ActionIcon> */}
        <Stack gap="xs" align="center">
          <Badge h={25} variant="outline" color="green" radius="sm">
            100G
          </Badge>
          <Text size="xs" fw={500}>
            0/0/0/1
          </Text>
        </Stack>
      </HoverCardTarget>
      <HoverCardDropdown>
        <Text size="sm">
          Hover card is revealed when user hovers over target element, it will be hidden once mouse
          is not over both target and dropdown elements
        </Text>
      </HoverCardDropdown>
    </HoverCard>
  );
};
